<template>
  <div class="app-container">
    <a-card :bordered="false" style="width: 90%;margin-left: 5%;">
      <a-button type="primary" style="margin: 20px;" @click="showModal">添加</a-button>
      <a-button type="primary">保存</a-button>
      <a-table :columns="columns" :data-source="data" bordered :pagination="false">
        <template #fname="{ record }">
          <input type="text" v-model="record.name" class="input1">(ID:{{ record.id }})
        </template>
        <template #sort="{ record }">
          <input type="text" v-model="record.sort_id" class="input1">
        </template>
        <template #cao="{ record }">
          <a-button size="small"  v-if="record.level != '3'" @click="showModal">在此类下添加子类</a-button>&nbsp;&nbsp;
 
          <a-button
            type="primary" size="small" @click="showModal1">编辑</a-button>&nbsp;&nbsp;<a-button type="primary"
            size="small" danger  @click="showDeleteConfirm">删除</a-button>
        </template>
      </a-table>
    </a-card>
    <!-- 添加 -->
    <a-modal v-model:visible="visible"  @ok="handleOk" :footer="null">
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
   
    <a-form-item label="所属分类" v-bind="validateInfos.region">
      <a-select v-model:value="modelRef.region" placeholder="顶级">
        <a-select-option value="shanghai">Zone one</a-select-option>
        <a-select-option value="beijing">Zone two</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="名称" v-bind="validateInfos.name">
      <a-input v-model:value="modelRef.name" />
    </a-form-item>
    <a-form-item label="排序" v-bind="validateInfos.sort">
      <a-input v-model:value="modelRef.sort" />
    </a-form-item>
    
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click.prevent="onSubmit">保存</a-button>
      <a-button style="margin-left: 10px" @click="resetFields">取消</a-button>
    </a-form-item>
  </a-form>
    </a-modal>
    <!-- 编辑 -->
    <a-modal v-model:visible="visible1"  @ok="handleOk1" :footer="null">
      <a-form :label-col="{span:4}" :wrapper-col="{span:14}">
   
    <a-form-item label="所属分类" >
      <a-select   v-model:value="form.name" placeholder="顶级">
        <a-select-option value="shanghai">Zone one</a-select-option>
        <a-select-option value="beijing">Zone two</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="名称" v-model:value="form.region" >
      <a-input  />
    </a-form-item>
    <a-form-item label="排序" v-model:value="form.sort" >
      <a-input  />
    </a-form-item>
    
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" >保存</a-button>
      <a-button style="margin-left: 10px" >取消</a-button>
    </a-form-item>
  </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref, toRaw,reactive,createVNode } from 'vue';
import { Form } from 'ant-design-vue';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

const useForm = Form.useForm;
const showModal = () => {
      visible.value = true;
    };
    const handleOk = (e: MouseEvent) => {
      console.log(e);
      visible.value = false;
    };
    const showDeleteConfirm = () => {
      Modal.confirm({
        title: () => '提示',
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => '此操作将永久删除该数据, 是否继续?',
        okText: () => '确认',
        okType: 'danger',
        cancelText: () => '取消',
        onOk() {
          console.log('OK');
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    };
const visible = ref<boolean>(false);
  const visible1 = ref<boolean>(false);
const columns = [
  { title: '分类名称', key: 'fname', slots: { customRender: 'fname' } },
  { title: '别名', dataIndex: "spell", key: 'alias' },
  { title: '排序', key: 'sort', slots: { customRender: 'sort' } },
  { title: '操作', key: 'cao', slots: { customRender: 'cao' } },
];

interface DataItem {
  key: number;
  name: string;
  age: number;
  address: string;
  children?: DataItem[];
}

const data: DataItem[] =[{"id":1,"pid":0,"name":"生活12","sort_id":0,"content":"","spell":"shenghuo12","level":1,"hasChildren":true,children:[{"id":8,"pid":1,"name":"财会 | 金融 | 保险","sort_id":0,"content":"","spell":"caihuijinrongbaoxian","level":2,"hasChildren":true},{"id":9,"pid":1,"name":"医疗 | 制药 | 环保","sort_id":0,"content":"","spell":"yiliaozhiyaohuanbao","level":2,"hasChildren":true}]},{"id":2,"pid":0,"name":"人力 | 行政 | 管理","sort_id":0,"content":"","spell":"renlixingzhengguanli","level":1,"hasChildren":true},{"id":3,"pid":0,"name":"销售 | 客服 | 采购 | 淘宝","sort_id":0,"content":"","spell":"xiaoshoukefucaigoutaobao","level":1,"hasChildren":true},{"id":4,"pid":0,"name":"市场 | 媒介 | 广告 | 设计","sort_id":0,"content":"","spell":"shichangmeijieguanggaosheji","level":1,"hasChildren":true},{"id":5,"pid":0,"name":"生产 | 物流 | 质控 | 汽车","sort_id":0,"content":"","spell":"shengchanwuliuzhikongqiche","level":1,"hasChildren":true},{"id":6,"pid":0,"name":"网络 | 通信 | 电子","sort_id":0,"content":"","spell":"wangluotongxindianzi","level":1,"hasChildren":true},{"id":7,"pid":0,"name":"法律 | 教育 | 翻译 | 出版","sort_id":0,"content":"","spell":"falvjiaoyufanyichuban","level":1,"hasChildren":true}]

const rowSelection = {
  onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
    console.log(selected, selectedRows, changeRows);
  },
};
export default {
  setup() {
    const modelRef = reactive({
      name: '',
      region: undefined,
      sort:0
    });
    const form=reactive({
      name:'',
      region:'生活12',
      sort:0
    })
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: 'Please input name',
        },
      ],
      region: [
        {
          required: true,
          message: 'Please select region',
        },
      ],
      sort: [
        {
          required: true,
          message: 'Please select type',
          
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
    const onSubmit = () => {
      validate()
        .then(() => {
          console.log(toRaw(modelRef));
        })
        .catch(err => {
          console.log('error', err);
        });
    };
    // 编辑的数据
  
    // 编辑对话框
    const showModal1 = () => {
      visible1.value = true;
    };

    const handleOk1 = (e: MouseEvent) => {
      console.log(e);
      visible1.value = false;
    };
    return {
      data,
      columns,
      rowSelection,
      visible,
      showModal,
      handleOk,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      validateInfos,
      resetFields,
      modelRef,
      onSubmit,
      visible1,
      showModal1,
      handleOk1,
      form,
      showDeleteConfirm
     
    };
  },
}
</script>

<style>

</style>